{% extends "templates/web.html" %}

{% macro email_login_body() -%}
<style>
	.web-footer,
	nav.navbar {
		display: none;
	}
	.form-signin.form-login{
		margin-top: 20px;
	}
</style>
{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
<ul class="row g-3 list-unstyled li_animate">
	 <li class="col-12 mt-3 text-center">
		{{ logo_section() }}
	</li> 
	
	<li class="col-12">
		<div class="mb-2">
			<label class="form-label">{{ login_label or _("Email")}}</label>
			<input type="text" id="login_email" class="form-control  form-control-lg"
				placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('jane@example.com') }}{% endif %}"
				required autofocus autocomplete="username">
		</div>
	</li>
	<li class="col-12">
		<div class="mb-2">
			<div class="form-label">
				<span class="d-flex justify-content-between align-items-center"> {{
					_("Password") }}
				</span>
			</div>
			<input type="password" id="login_password" class="form-control form-control-lg" placeholder="•••••"
				autocomplete="current-password" required>
				<a class="d-flex for_get justify-content-end mt-3 text-end" href="#forgot">{{ _("Forgot Password?") }}</a>
		</div>
	</li>
	 <!-- <li class="col-12">
		<div class="form-check">
			<a href="#forgot">{{ _("Forgot Password?") }}</a>
		</div>
	</li>  -->
	 <!-- <li class="col-12 mt-4">
		<a class="btn btn-lg btn-block btn-dark lift text-uppercase px-5" href="index.php" title="">SIGN IN</a>
	</li>  -->

</ul>
{% endif %}
<div class="page-card-actions">
	{% if not disable_user_pass_login %}
	<button class="btn btn-lg btn-block btn-dark lift text-uppercase px-5 btn-login" type="submit">
		{{ _("Login") }}</button>
	{% endif %}
	{% if ldap_settings and ldap_settings.enabled %}
	<button class="btn btn-lg btn-block btn-dark lift text-uppercase px-5 btn-login btn-ldap-login">
		{{ _("Login with LDAP") }}</button>
	{% endif %}
</div>
{% endmacro %}

{% block head_include %}
{{ include_style('login.bundle.css') }}
{% endblock %}

{% macro logo_section() %}
 <div class="page-card-head p-0 d-flex gap-2 align-items-center justify-content-center ">
	<img class="app-logo" src="{{ logo }}">
	<h4 class="m-0">{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
</div> 
{% endmacro %}

{% block page_content %}
<!-- {{ for_test }} -->
<div>
	<noscript>
		<div class="text-center my-5">
			<h4>{{ _("Javascript is disabled on your browser") }}</h4>
			<p class="text-muted">
				{{ _("You need to enable JavaScript for your app to work.") }}<br>{{ _("To enable it follow the
				instructions in the following link: {0}").format("<a
					href='https://enable-javascript.com/'>enable-javascript.com</a></p>") }}
		</div>
	</noscript>
	<section class='for-login'>
		<div class="login-content">
			<!-- {{ logo_section() }} -->
			<form class="form-signin form-login m-0" role="form">
				{%- if social_login or login_with_email_link -%}
				<div class="page-card-body">
					<form class="form-signin form-login" role="form">
						{{ email_login_body() }}
					</form>
					<div class="social-logins text-center">
						{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
						<p class="text-muted login-divider">{{ _("or") }}</p>
						{% endif %}
						<div class="social-login-buttons">
							{% for provider in provider_logins %}
							<div class="login-button-wrapper">
								<a href="{{ provider.auth_url }}"
									class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
									{% if provider.icon %}
									{{ provider.icon }}
									{% endif %}
									{{ _("Login With {0}").format(provider.provider_name) }}</a>
							</div>
							{% endfor %}
						</div>
						{% if login_with_email_link %}
						<div class="login-with-email-link">
							<div class="login-button-wrapper">
								<a href="#login-with-email-link"
									class="btn btn-block btn-default btn-sm btn-login-option btn-login-with-email-link">
									{{ _("Login with Email Link") }}</a>
							</div>
						</div>
						{% endif %}
					</div>
				</div>
				{% else %}
				{{ email_login_body() }}
				{%- endif -%}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>

	{%- if social_login -%}
	<section class='for-email-login' style="display: none;">
		<div class="login-content page-card">
			{{ logo_section() }}
			<form class="form-signin form-login" role="form">
				{{ email_login_body() }}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>
	{%- endif -%}
	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}' style="display: none;">
		<div class="login-content page-card">
			{{ logo_section() }}
			{%- if not disable_signup -%}
			{{ signup_form_template }}
			{%- else -%}
			<div class='page-card-head mb-2'>
				<span class='indicator gray'>{{_("Signup Disabled")}}</span>
				<p class="text-muted text-normal sign-up-message mt-1 mb-8">{{_("Signups have been disabled for this
					website.")}}</p>
				<div><a href='/' class='btn btn-primary btn-md'>{{ _("Home") }}</a></div>
			</div>
			{%- endif -%}
		</div>

	</section>

	<section class='for-forgot' style="display: none;">
		<div class="login-content page-card">
			<form class="form-signin form-forgot hide" role="form">
				<div class="page-card-body">
					<ul class="row g-3 list-unstyled li_animate">
						<li class="col-12 ">
							<div class="page-card-head p-0 d-flex gap-2 align-items-center justify-content-center ">
								<img class="app-logo" src="/files/xperterp.svg">
								<h4 class="m-0">Forgot Password</h4>
							</div>
						</li>
						
						<!-- <li class="col-12 mb-5">
							<h2 class="text-gradient font-heading">{{ _('Forgot Password') }} your Account</h2>
							<span class="text-muted">Amazing Features to make your life easier & work
								efficient.</span>
						</li> -->
						<!-- <li class="col-12 mb-4">
							<a class="btn btn-outline-secondary btn-block" href="#">
								<i class="fa-solid fa-user-graduate me-2"></i>
								<span>Sign in with Student</span>
							</a>
							<a class="btn btn-outline-secondary btn-block" href="#">
								<i class="fa-solid fa-chalkboard-user me-2"></i>
								<span>Sign in with Staff</span>
							</a>
						</li> -->
						<li class="col-12">
							<div class="mb-2">
								<label class="form-label">{{ _('Email Address') }}</label>
								<input type="email" id="forgot_email" class="form-control  form-control-lg"
									placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
							</div>
						</li>

					</ul>

					<!-- <div class="email-field">
						<input type="email" id="forgot_email" class="form-control  form-control-lg"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>

					</div> -->
				</div>
				<div class="page-card-actions">
					<button class="btn btn-lg btn-block btn-dark lift text-uppercase px-5 btn-block btn-forgot"
						type="submit">{{ _("Reset Password")
						}}</button>
					<p class="text-end sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>

			</form>
		</div>
	</section>

	<section class='for-login-with-email-link' style="display: none;">
		<div class="login-content page-card">
			<form class="form-signin form-login-with-email-link hide" role="form">
				<div class="page-card-head">
					<h4>{{ _('Login With Email Link') }}</h4>
				</div>
				<div class="page-card-body">
					<div class="email-field">
						<input type="email" id="login_with_email_link_email" class="form-control  form-control-lg"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>
					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-lg btn-block btn-dark lift text-uppercase px-5 btn-login-with-email-link"
						type="submit">{{ _("Send
						login link") }}</button>
					<p class="text-center sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>
			</form>
		</div>
	</section>
</div>
{% endblock %}

{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>
{% endblock %}

{% block sidebar %}{% endblock %}